<script>
export default {
  name: "indexIndex",
  data(){
    {
      return {
        carList:[
          {id:1,carName:'奔驰',Ctime: new Date()},
          {id:2,carName:'宝马',Ctime: new Date()},

        ],
        carId:'',
        carName:'',
        keyWord:''
      }
    }

  },
  methods:{
  //   添加
     add(){
      // console.log(111)
       var obj={
         id:this.carId,
         carName:this.carName,
         Ctime:new Date(),
       };
       this.carList.push(obj);
    },
    del(index){
      console.log(222)
      this.carList.splice(index,1);
    }
  }
}
</script>


<template>
<div>
  <div class="card">
    <div class="card-header">添加品牌</div>
    <div class="card-body">
<!--      表单-->
      <form class="form-inline">
        <label for="text">Id:</label>
        <input type="text" class="form-control" v-model="carId">
        <label for="pwd">Name:</label>
        <input type="text" class="form-control" v-model="carName">
        <button type="button" class="btn btn-primary" @click="add">添加</button>
        <label for="text">搜索关键字:</label>
        <input type="text" class="form-control" v-model="keyword">

      </form>
<!--      表格-->
      <table class="table">
        <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Ctime</th>
          <th>Operation</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in carList" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.carName}}</td>
          <td>{{item.Ctime}}</td>
          <td><button type="button" class="btn btn-danger" @click="del(index)">删除</button></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
</template>

<style scoped lang="less">

</style>